<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理系统-Web版</title>
    <link rel="icon" th:href="@{/favicon.png}" type="image/png"/>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            overflow: hidden;
        }

        /* 标题动画 */
        .title-container {
            position: fixed;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: titleRise 1.5s ease-out forwards;
            text-align: center;
        }

        @keyframes titleRise {
            0% { top: 50%; opacity: 0; }
            100% { top: 30%; opacity: 1; }
        }

        h1 {
            font-size: 3rem;
            color: #2c3e50;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 2rem;
        }

        /* 按钮容器 */
        .btn-container {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            opacity: 0;
            animation: btnAppear 1s ease 1s forwards;
        }

        /* 按钮通用样式 */
        .nav-btn {
            padding: 1.2rem 2.5rem;
            font-size: 1.2rem;
            border: none;
            border-radius: 25px;
            background: #3498db;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transform: translateY(20px);
            opacity: 0;
        }

        .nav-btn:nth-child(1) { animation: btnSlide 0.8s ease 1.2s forwards; }
        .nav-btn:nth-child(2) { animation: btnSlide 0.8s ease 1.4s forwards; }
        .nav-btn:nth-child(3) { animation: btnSlide 0.8s ease 1.6s forwards; }

        .nav-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0,0,0,0.2);
            background: #2980b9;
        }

        /* 动画定义 */
        @keyframes btnAppear {
            to { opacity: 1; }
        }

        @keyframes btnSlide {
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @media (max-width: 768px) {
            .nav-btn {
                padding: 1rem 1.5rem;
                font-size: 1rem;
            }
            h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
<div class="app">
    <div class="title-container">
        <h1>学生信息管理系统-Web版</h1>
        <div class="btn-container">
            <button class="nav-btn" onclick="window.location.href='/show'">▶ 学生信息展示</button>
            <button class="nav-btn" onclick="window.location.href='/manage'">✎ 学生信息管理</button>
            <button class="nav-btn" onclick="window.location.href='/about'">ℹ 关于本项目</button>
        </div>
    </div>
</div>

<!-- Vue扩展支持 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
    // 可选的Vue指令扩展
    new Vue({
        el: 'body',
        mounted() {
            // 添加页面加载完成后的动画触发
            document.body.classList.add('loaded')
        }
    })
</script>
</body>
</html>